<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-03-19 12:36:25
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-03-19 13:15:38
 * @FilePath: \从0到1的楷楷\从0到1的楷楷\pink系列\Javasritp\第三天\作业\核心练习题.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            padding-left: 3px;
        width: 600px;
        height: 480px;
     margin-left: 0;
        border: 3px solid pink;
        border-radius: 5px 5px 5px 5px;
        }
        img {

            width: 100px;
            height: 100px;
            border: 2px solid rgb(56, 220, 231);
            border-radius: 10px 0 10px 0;
        }

        li {
            display:inline- block;
            margin-left: 6px 5px;
            list-style: none;
            float: left;
            margin: 5px 8px;
        }
    </style>
</head>

<body>
    <ul class="box">
        <script>
            let arr = [
                './images/1.webp',
                './images/2.webp',
                './images/3.webp',
                './images/4.webp',
                './images/5.webp',
                './images/6.webp',
                './images/7.webp',
                './images/8.webp',
                './images/9.webp',
                './images/10.webp',
                './images/11.webp',
                './images/12.webp',
                './images/13.webp',
                './images/14.webp',
                './images/15.webp',
                './images/16.webp',
                './images/17.webp',
                './images/18.webp',
                './images/19.webp',
                './images/20.webp',
 

            ]
            let num = prompt("输入显示个数")
            for (i = 0; i < num; i++) {

                document.write(`
    <li><img src="${arr[i]}"></li>
    `)

}

            
        </script>

    </ul>

</body>

</html>